import React, { Component } from 'react';
import {
    Text,
    View,
    Image,
    TouchableOpacity,
    ImageBackground,
    ScrollView
} from 'react-native';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
//加载模块样式
import { Loginstyles as styles } from '../../../styles';
import Account from './contain/account';
import Phone from './contain/phone';

import { loginForToken } from '../../actions/userAction'


// 获取当前设备的宽度
const Dimensions = require('Dimensions');
const { width, height } = Dimensions.get('window');

class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            acc_or_pho: 0,//手机或账号登录状态  0为账号 1为手机
        }
    }

    render() {
        return (


            <ImageBackground style={styles.container}
                source={require('../../img/app/login5.jpg')} resizeMode='cover'>

                {/* <View style={styles.container}> */}
                {/*logo*/}

                <ScrollView style={{ width: width * 1 }}>
                    <View style={styles.login_scr}>
                        <Image source={require('../../img/Login/logoall2.png')} style={[styles.iconStyle, { marginTop: height * 0.1 }]} />
                        <Text style={styles.xianzhiStyle}>先 知</Text>

                        <View style={[styles.defaultSettingStyle, { width: width * 0.68 }]}>
                            {/*账号登录*/}
                            <TouchableOpacity
                                onPress={() => { this.setState({ acc_or_pho: 0 }) }}>
                                {this.state.acc_or_pho == 0 ? <Text style={{ color: '#ffffff', fontFamily: "msyh" }}>账号登录</Text> : <Text style={{ fontFamily: "msyh" }}>账号登录</Text>}
                                {this.state.acc_or_pho == 0 ? <View style={[styles.aStyle, { width: width * 0.14 }]} /> : null}
                            </TouchableOpacity>
                            {/*手机登录*/}
                            <TouchableOpacity
                                onPress={() => { this.setState({ acc_or_pho: 1 }) }}>
                                {this.state.acc_or_pho == 1 ? <Text style={{ color: '#ffffff', fontFamily: "msyh" }}>手机登录</Text> : <Text style={{ fontFamily: "msyh" }}>手机登录</Text>}
                                {this.state.acc_or_pho == 1 ? <View style={[styles.aStyle, { width: width * 0.14 }]} /> : null}
                            </TouchableOpacity>
                        </View>

                        {/* 引入账号登录或手机登录组件 */}
                        {this.state.acc_or_pho == 0 ? <Account navigation={this.props.navigation} /> :
                            <Phone navigation={this.props.navigation} />}
                    </View>
                </ScrollView>


                {/* 底部注册 */}
                <View style={[styles.bottom, { width: width * 0.85 }, { top: height * 0.86 }]}>
                    <Text style={[styles.line, { width: width * 0.27 }]}></Text>
                    <TouchableOpacity activeOpacity={1} style={{ height: 40 }}
                        onPress={() => { this.props.navigation.navigate('Choose'); }}>
                        <Text style={styles.linet}>没有账号?
                        <Text style={{ color: '#ffffff' }}>立即注册</Text>
                        </Text>
                    </TouchableOpacity>
                    <Text style={[styles.line, { width: width * 0.27 }]}></Text>
                </View>
                {/* </View> */}
            </ImageBackground>
        );
    }
}

//组合action
var actions = {
    loginForToken
}
//连接state到props
const mapStateToProps = state => {
    return {
        loginData: state.loginTokenReducer
    }
}
//连接action
const mapDispatchToProps = (dispatch) => {
    return {
        actions: bindActionCreators(actions, dispatch)
    }
}
//导出组合好的组件(组合后状态改变重新渲染组合组件的页面)
export default connect(
    mapStateToProps, mapDispatchToProps
)(Login);
